const slider = (item, defaultHeight = 500) => {
    let slideHeight = item.clientHeight;
    const HEIGHT = defaultHeight;
    if (slideHeight > HEIGHT) {
        // 项目元素定位
        item.style.position = "relative"
        item.style.height = HEIGHT + "px"
        // 创建DOM,然后定位在元素的底部
        let dom = document.createElement('div')
        dom.style.height = "100px"
        dom.style.width = "100%"
        dom.style.padding = "20px 0"
        dom.style.position = "absolute"
        dom.style.bottom = "0"
        dom.style.left = "0"
        dom.style.cursor = "pointer"
        dom.style.backgroundImage = "linear-gradient(0deg,rgba(125,125,125,0.9) 0%,#fff 70%)"
        dom.id = "slide"
        // 设置DOM样式
        dom.innerHTML = "<p style='text-align:center;line-height:30px'>点击查看更多<i style='color:#eb2001'>数据</i></p><p style='line-height:30px;color:#2eb037;font-weight:700;font-size:30px;text-align:center'>v</p>";

        // dom事件绑定
        dom.addEventListener("click", function () {
            handlerClick(item, slideHeight, dom)
        }, false)

        // 插入Dom
        item.append(dom)
    }
}

function handlerClick(item, slideHeight, dom) {
    item.style.transition = "height .3s"
    item.style.height = slideHeight + 'px'
    dom.style.display = "none"
}




module.exports = { slider }